<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
</head>
<body style="background-color:#F0F0F0">
<div id="app" v-cloak>
  <div id="blank" class="header shopheader" v-cloak>
      <div v-back.tapmode class="getback"></div>
      <span class="title">修改分类</span>
      <span tapmode  style="position:absolute;right:10px;font-size:14px;" v-myclick="[1, savecategory]" v-show="showfn!=1">保存</span>
      <span class='fnSave'  style="position:absolute;right:10px;font-size:14px;" v-myclick="[1, fnSave]" v-show="showfn==1">确定</span>
  </div>
  <div style="padding-top:60px;">
    <div class="category_addname">
    <input  placeholder="输入分类昵称" v-model="category_name" type="text">
    </div>
    <div class="row-container" style="margin-top:30px">
    <a  class="row" v-row-active.tapmode v-open-win="{category_id:category.shop_category_id}" vurl="categoryinfo" >
        <span>分类下商品</span>
        <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
        <span class="row-detail">{{category.count}}</span>
    </a>
  </div>
  <div class="photograph" v-row-active v-myclick="setPic">
  <img :class="{'setpic': pic}" :src="pic ? pic : '../../image/camera.png'">
  <div>上传主图（建议尺寸320*120）</div>
  </div>
  </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/components.js"></script>
<script>
var vm,
    category_id,
    pic,
    FNImageClip,
    showfn=0,
    category_name;

apiready = function () {
  showProgress();
  MNActionButton = api.require('PIActionButton');
  FNImageClip = api.require('FNImageClip');
  wx = api.require('wx');
  setBSImg();
  var param = api.pageParam;
      category_id = param.category_id;
  var data = {
      member_id: getPrefs('member_id'),
      category_id:category_id,
  };
  var callback = function (ret) {
      var home = ret.content;
      category = home.category;
      category_name = category.name;
      pic = category.pic;
      initApp();
      api.parseTapmode();
  };
  pinet.post(URL.getCategoryinfo, data, callback);
  addListeners();
};

function initApp() {
    vm = new Vue({
        el: "#app",
        data: {
            category_name:category_name,
            category_id:category_id,
            pic:pic,
            url: URL.getCategoryinfo,
            showfn:0,
        },
        methods: {
            savecategory:function(index){
              if (!this.category_name) {
                  alert('请输入昵称');
                  return;
              }
              if (!this.pic) {
                  alert('请选择分类图片');
                  return;
              }
              showProgress();
              var data = {
                  member_id: getPrefs('member_id'),
                  category_name: this.category_name,
                  category_id:this.category_id,
                  pic:pic,
                  type:index
              };
              var file = {
                  file: vm.pic
              };
              var callback = function (ret) {
                if(ret.errcode==0){
                  api.sendEvent({
                      name: 'savecategory'
                  });
                  closeWin();
                }
              };
              return pinet.postFiles(URL.saveCategory, data, file, callback);
            },
            setPic: function () {
                api.actionSheet({
                    cancelTitle: '取消',
                    buttons: ['拍照', '从手机相册选择'],
                    style: {
                        fontNormalColor: '#000',
                        fontPressColor: '#000',
                    }
                }, function (ret, err) {
                    var index = ret.buttonIndex;
                    switch (index) {
                        case 1:
                            return vm.getPicture('camera');
                        case 2:
                            return vm.getPicture('album');
                        default:
                            break;
                    }
                });
            },
            getPicture: function (sourceType) {
                api.getPicture({
                    sourceType: sourceType,
                    targetWidth:600,
                    encodingType:'jpg'
                }, function (ret) {
                    if (ret) {
                      vm.showfn=1;
                      FNImageClip.open({
                          rect: {
                              x: 0,
                              y: document.querySelector('.header').offsetHeight,
                              w: api.winWidth,
                              h: api.winHeight - 300
                          },
                          srcPath: ret.data,
                          style: {
                              mask: '',
                              clip: {
                                  w: 320,
                                  h: 120,
                                  x: (api.winWidth-320)/2,
                                  y: 180,
                                  borderColor: '#0f0',
                                  borderWidth: 1,
                                  appearance: 'rectangle'
                              }
                          },
                          mode:'image',
                      });
                    }
                });
            },
            fnSave :function(){
              FNImageClip.save({
                  destPath: 'fs://image/temp'+new Date().getTime()+'.png',
                  copyToAlbum: false,
                  quality: 1
              },function(ret, err){
                  if(ret) {
                    vm.pic=ret.destPath;
                    vm.showfn=0;
                    FNImageClip.close();
                  } else{
                      alert('裁剪失败，请重试');
                  }
              });
            }
        },
    });
}
function addListeners() {
    api.addEventListener({
        name: 'viewappear'
    }, function () {
        onPageStart();
    });

    api.addEventListener({
        name: 'viewdisappear'
    }, function (ret, err) {
        onPageEnd();
    });

    api.addEventListener({
        name: 'keyback'
    }, function (ret, err) {
        onPageEnd();
        api.closeWin();
    });
}
</script>
</html>
